<template>
    <div>
        <h3>>请选择你的英雄<</h3>
        <div class="top">
            <input type="text" :class="frame==true?'textframe':'textframe1'" v-model="text" @focus="present=true,frame=false" @blur="present=false,frame=true">
            <span class="opt">选择</span>
        </div>
        <div class="content" v-show="present">
            <div v-for=" item,index in legendlist" @mousedown="text=item">{{ item }}</div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    let frame=ref(true);
    let legendlist= ref(["无双剑姬","疾风剑豪","无极剑圣","伊泽瑞尔","诺克萨斯"]);
    let text=ref("无双剑姬")
    let present=ref(false)
</script>

<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    #app{
        padding: 10px;
        width: 400px;
        border: solid grey 1px;
        border-radius: 10px;
        margin: 100px auto;
    }
    #app:hover{
        box-shadow: 2px 2px 2px #61ac85;
        transition: all 300ms;
    }
    .top{
        display: flex;
        justify-content: center;
    }
    h3{
        text-align: center;
    }
    .textframe1{
        font-size: 16px;
        width: 80%;
        height: 30px;
        border: 2px solid grey;
        border-right: none;
        outline: none;
        border-top-left-radius: 10px;
        /* border-bottom-left-radius: 10px; */
    }
    .textframe{
        font-size: 16px;
        width: 80%;
        height: 30px;
        border: 2px solid grey;
        border-right: none;
        outline: none;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .textframe:focus{
        background-color: #80879b;
    }
    .opt{
        padding-top: 1px;
        text-align: center;
        cursor: pointer;
        width: 10%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;

        height: 30px;
        border-bottom: 2px solid grey;
        border-right: 2px solid grey;
        border-top: 2px solid grey;
    }
    .opt:hover{
        background-color: #61ac85;
        transition: all 200ms;
    }
    .content{
        margin-left: 19px;
        width: 80%;
        border: 2px solid grey;
        border-top: none;
        border-bottom-left-radius: 10px;
    }
    .content div{
        padding-top: 2px;
        height: 30px;
        cursor: pointer;
        /* background-color: red; */
    }
    .content div:hover{
        background-color: #61ac85;
        transition: all 200ms;
    }
</style>